<template>
  <div>
    <u-cell-group v-if="pageData" :border="false">
      <cus-cell title="图片" :border="false">
        <div
          class="u-slot-upload"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('list')
          "
        >
          <draggable v-model="editConfigCom.attribute.list">
            <div
              v-for="(item, index) in editConfigCom.attribute.list"
              :key="index"
              class="cell__body"
            >
              <div class="upload-picker">
                <div
                  class="upload-picker-img"
                  @mouseenter="onMouseEnterShowUploadTips(index)"
                  @mouseleave="onMouseEnterShowUploadTips(-1)"
                >
                  <u-upload
                    :name="String(index)"
                    @afterRead="onUploadOnlyAfterRead"
                    :previewImage="false"
                    :maxSzie="10485760"
                    :maxCount="10"
                    width="100"
                    height="100"
                  >
                    <image
                      :src="item.img"
                      mode="fix"
                      style="width: 5rem; height: 5rem"
                    />
                  </u-upload>
                  <!--              -->
                  <div
                    class="upload-tips"
                    v-if="index === isShowUploadTipsIndex"
                  >
                    重新上传
                  </div>
                </div>
                <div class="upload-picker-navigateType">
                  <div class="upload-picker-navigateType-options">
                    <div style="margin-right: 10px">链接</div>
                    <div>
                      <uni-data-select
                        v-if="item && item.hasOwnProperty('navigateType')"
                        v-model="item.navigateType"
                        :localdata="navigateTypeOptions"
                        :clear="false"
                        style="width: 6rem"
                      ></uni-data-select>
                    </div>
                  </div>
                </div>
              </div>

              <navigate-item-config :listIndex="index" />

              <u-icon
                name="close-circle"
                class="upload-picker-del"
                size="20"
                @click="onDeletePic(index)"
              ></u-icon>
            </div>
          </draggable>
          <div class="tips">最多添加10张图片，长按拖拽可改变顺序</div>
          <u-upload
            class="upload-picker"
            name="upload-picker"
            :maxSzie="10485760"
            @afterRead="onUploadAfterRead"
            :previewImage="false"
            :maxCount="10"
            width="100"
            height="100"
          >
            <u-button plain hairline type="primary" icon="plus" size="small"
              >添加图片</u-button
            >
          </u-upload>
          <!--            <text class="">大小1m内支持使用png、jpg、gif格式</text>-->
        </div>
      </cus-cell>
      <cus-cell
        title="是否显示面板指示器"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('indicator')
        "
      >
        <div class="u-slot-value">
          <u-switch
            size="20"
            v-model="editConfigCom.attribute.indicator"
            :activeColor="$theme.themeColor.primary"
          ></u-switch>
        </div>
      </cus-cell>
      <cus-cell
        title="指示器样式"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('indicatorMode')
        "
      >
        <div class="u-slot-value">
          <u-radio-group
            v-model="editConfigCom.attribute.indicatorMode"
            :activeColor="$theme.themeColor.primary"
            placement="row"
          >
            <u-radio
              :customStyle="{ marginRight: 'auto' }"
              v-for="(item, index) in modeOptions"
              :key="index"
              :label="item.label"
              :name="item.value"
            >
            </u-radio>
          </u-radio-group>
        </div>
      </cus-cell>
      <cus-cell
        title="指示器位置"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('indicatorStyle')
        "
      >
        <div class="u-slot-value">
          <u-radio-group
            v-model="editConfigCom.attribute.indicatorStyle"
            :activeColor="$theme.themeColor.primary"
            placement="row"
          >
            <u-radio
              :customStyle="{ marginRight: 'auto' }"
              v-for="(item, index) in indicatorStyleOptions"
              :key="index"
              :label="item.label"
              :name="item.value"
            >
            </u-radio>
          </u-radio-group>
        </div>
      </cus-cell>
      <cus-cell
        title="间隔"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('interval')
        "
      >
        <div class="u-slot-value">
          <u-number-box v-model="editConfigCom.attribute.interval" />
        </div>
      </cus-cell>

      <cus-cell
        title="卡片轮播"
        :border="false"
        v-if="
          editConfigCom.style &&
          editConfigCom.style.hasOwnProperty('marginRight') &&
          editConfigCom.style.hasOwnProperty('marginLeft')
        "
      >
        <div class="u-slot-value">
          <u-switch
            size="20"
            v-model="isSwiperCard"
            @change="onChangeIsSwiperCard"
            :activeColor="$theme.themeColor.primary"
          ></u-switch>
        </div>
      </cus-cell>
    </u-cell-group>
  </div>
</template>

<script>
import { uploadImage } from "@/service/api/base";
import { NAVIGATE_TYPE } from "@/const/widget";
import {
  NAVIGATE_PARAMS,
  navigateTypeOptions,
} from "@/components/navigateConfig/config";

export default {
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  data() {
    return {
      NAVIGATE_TYPE,
      fileList: [],
      isSwiperCard: false,
      navigateTypeOptions,
      modeOptions: [
        {
          label: "横线",
          value: "line",
        },
        {
          label: "点",
          value: "dot",
        },
        {
          label: "数字",
          value: "number",
        },
      ],
      indicatorStyleOptions: [
        {
          label: "上",
          value: "top: 20rpx",
        },
        {
          label: "下",
          value: "bottom: 20rpx",
        },
        {
          label: "左",
          value: "left: 20rpx",
        },

        {
          label: "右",
          value: "right: 20rpx",
        },
      ],
      isShowUploadTipsIndex: -1,
    };
  },
  created() {
    this.innitSwiperData();
  },
  methods: {
    innitSwiperData() {
      this.isSwiperCard =
        this.editConfigCom?.attribute?.previousMargin > 0 &&
        this.editConfigCom?.attribute?.nextMargin > 0;
    },
    onMouseEnterShowUploadTips(index) {
      this.isShowUploadTipsIndex = index;
    },
    //----上传图片 start----
    //轮播添加图片
    async onUploadAfterRead(e) {
      if (e.file.size > 1048576) {
        return this.$showMessage({
          op: "message",
          type: "error",
          content: `禁止上传超过1m的图片`,
        });
      }
      if (this.editConfigCom.attribute.list.length >= 10) {
        return this.$showMessage({
          op: "message",
          type: "error",
          content: `最多添加10张图片`,
        });
      }
      const url = await this.uploadFilePromise(e.file.url);
      this.editConfigCom.attribute.list.push({
        img: url,
        ...NAVIGATE_PARAMS,
      });
      await this.$showMessage({
        op: "message",
        type: "success",
        content: `上传${url ? "成功" : "失败"}`,
      });
      // uni.showToast({ title: `上传${res ? "成功" : "失败"}` });
    },
    //轮播置换图片
    async onUploadOnlyAfterRead(e) {
      if (e.file.size > 1048576) {
        return this.$showMessage({
          op: "message",
          type: "error",
          content: `禁止上传超过1m的图片`,
        });
      }
      const { name } = e;
      const index = Number(name);
      const url = await this.uploadFilePromise(e.file.url);
      const temp = this.editConfigCom.attribute.list[index];
      this.editConfigCom.attribute.list.splice(index, 1);
      this.editConfigCom.attribute.list.splice(index, 0, {
        ...temp,
        img: url,
      });
      await this.$showMessage({
        op: "message",
        type: "success",
        content: `上传${url ? "成功" : "失败"}`,
      });
    },
    onDeletePic(e) {
      this.editConfigCom.attribute.list.splice(e, 1);
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        uploadImage(url).then((res) => {
          const url = res.baseUrl + res.path;
          console.log("=====", url);
          res ? resolve(url) : reject(false);
        });
      });
    },
    //----上传图片 end----
    onChangeIsSwiperCard(is) {
      this.editConfigCom.attribute.previousMargin = is ? 30 : 0;
      this.editConfigCom.attribute.nextMargin = is ? 30 : 0;
    },
  },
};
</script>

<style scoped lang="scss">
.cell__body {
  //display: flex;
  //flex-direction: row;
  box-sizing: border-box;
  padding: 10px 15px;
  font-size: 15px;
  color: #303133;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin: 10px 0;
  position: relative;
}
.u-slot-upload {
  width: 100%;
  .upload-picker {
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    &-navigateType {
      margin: 0 10px;
      &-options {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
    }
    &-img {
      position: relative;
      .upload-tips {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 13px;
      }
    }
    &-del {
      position: absolute;
      top: -10px;
      right: -10px;
    }
    .u-button {
      width: 430px;
    }
  }
}
.u-slot-slider {
  width: 100%;
  display: flex;
  align-items: center;
  .u-slider {
    flex: 1;
  }
}
.tips {
  text-align: center;
}
</style>
